<template>
    <div class="order-detail">
        <!--收货信息-->
        <div class="table-list">
            <div class="table-header">收货信息</div>
            <div class="table-item">用户昵称：{{ value.username }}</div>
            <div class="table-item">收货人：{{ orderInfo.addrName }}</div>
            <div class="table-item">联系电话：{{ orderInfo.addrPhone }}</div>
            <div class="table-item">收货地址：{{ orderInfo.areaName + orderInfo.address }}</div>
        </div>
        <!--订单信息-->
        <div class="table-list">
            <div class="table-header">订单信息</div>
            <div class="table-item">
                <p>订单编号：{{ orderInfo.tradeNo }}</p>
                <p>商品总数：{{ orderInfo.goodsCount }}</p>
            </div>
            <div class="table-item">
                <p>订单状态：{{ orderStatus[orderInfo.status].label }}</p>
                <p>商品总价：¥{{ orderInfo.goodsAmount }}</p>
            </div>
            <div class="table-item">
                <p>订单时间：{{ orderInfo.createTime }}</p>
                <p>运费：¥{{ orderInfo.freight }}</p>
            </div>
            <div class="table-item">
                <p>付款时间：{{ orderInfo.paidTime }}</p>
                <p>应付金额：¥{{ orderInfo.payment }}</p>
            </div>
            <div class="table-item">
                <p>发货时间：{{ orderInfo.deliveryTime }}</p>
                <p>支付方式：{{ payType[orderInfo.payType].label }}</p>
            </div>
            <div class="table-item">
                <p>成交时间：{{ orderInfo.confirmTime }}</p>
                <p>交易号：{{ orderInfo.payNo }}</p>
            </div>
        </div>
        <!--物流信息-->
        <div class="table-list">
            <div class="table-header">物流信息</div>
            <div class="table-item">
                <p>快递公司：{{ orderInfo.expressName }}</p>
                <p>快递单号：{{ orderInfo.expressNo }}</p>
            </div>
        </div>
        <!--售后信息-->
        <div class="table-list">
            <div class="table-header">售后信息</div>
            <div class="table-item">
                <p>售后类型：{{ postSaleType[value.type].label }}</p>
                <p>申请原因：{{ value.reason }}</p>
            </div>
            <div class="table-item">
                <p>审核状态：{{ postSaleStatus[value.status].label }}</p>
                <p>售后商品：{{ value.title }}</p>
            </div>
            <div class="table-item">
                <p>售后编号：{{ value.tradeNo }}</p>
                <p>商品总数：{{ value.count }}</p>
            </div>
            <div class="table-item">
                <p>申请时间：{{ value.createTime }}</p>
                <p>退款金额：¥{{ value.refund }}</p>
            </div>
            <div class="table-item">
                <p>成功时间：</p>
                <p>收货信息：{{ value.logisticsBackMsg.addrName + '/' + value.logisticsBackMsg.addrPhone }}</p>
            </div>
            <div class="table-item">
                <p>退款交易号：{{ value.refundNo }}</p>
                <p>收货地址：{{ value.logisticsBackMsg.areaName + value.logisticsBackMsg.address }}</p>
            </div>
        </div>
        <!--售后信息-->
        <div class="table-list" v-if="orderInfo.postSales.length > 0">
            <div class="table-header">售后信息</div>
            <div v-for="(item, index) in orderInfo.postSales" :key="index">
                <div class="table-item">
                    <p>第{{ index }}次记录</p>
                </div>
                <div class="table-item">
                    <p>审核状态：{{ postSaleType[item.type].label }}</p>
                    <p>失败原因：{{ item.refuseReason }}</p>
                </div>
                <div class="table-item">
                    <p>申请时间：{{ item.createTime }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import orderStatus from '../public/orderStatus.js';
	import postSaleStatus from '../public/postSaleStatus.js';
	import payType from '../public/payType.js';
	import postSaleType from '../public/postSaleType.js';
	export default {
		name: 'OrderDetail',
		data() {
			return {
				orderStatus: orderStatus,
				postSaleStatus: postSaleStatus,
				payType: payType,
				postSaleType: postSaleType,
                orderInfo: {}
			}
        },
        props: {
			// 售后信息
			value: {
				type: Object,
                default: () => {
                	return {}
                }
            }
        },
        created() {
			// 根据售后信息获取原订单信息
            this.$service.order.ordinary.info({
                id: this.value.orderId
            }).then(res => {
            	this.orderInfo = res;
            })
		}
	};
</script>

<style lang="stylus" scoped>
.order-detail {
    .table-list {
        border-radius: 4px;
        border: 1px solid #C9C9C9;
        margin-bottom: 20px;
        color: #333333;
        &:last-child {
            margin-bottom: 0;
        }
        .table-header {
            background: #F5F5F5;
            padding: 2px 14px;
            font-weight: 600;
        }
        .table-item {
            padding: 2px 14px;
            border-bottom: 1px solid #f5f5f5;
            &:last-child {
                border-bottom: none;
            }
            flexBox(space-between);
            p {
                width: 50%;
                textOverflow(1)
            }
        }
    }
}
</style>